import React, {useEffect} from "react";
import {Navigate} from "react-router-dom";
import {Card, CardActionArea, CardContent, CardMedia, Typography} from "@mui/material";

export default function SingerCard(props){
    const [go, setGo] = React.useState(false);

    const {img,name,id,from,allSinger} = props;
    useEffect(async () => {

        // await init()

    },[])
    function toSingerDetail(){
        setGo(true);
    }
    function goSingerDetail(){


        return <Navigate to='/singerDetail' state={{id:id,from:from,allSinger:allSinger,img:img,name:name}}/>
    }
    function errorImg(e){
        e.target.src = '/listico.png'
    }
    return (

        <Card sx={{minWidth: 300, maxWidth: 300, marginTop: 1}}>
            <CardActionArea onClick={toSingerDetail}>
                <CardMedia
                    component="img"
                    height="194"
                    image={img}
                    alt="face"
                    onError={errorImg}

                />
                <CardContent>
                            <Typography height='64px' gutterBottom variant="h6"  component="div">
                                {name}
                            </Typography>
                </CardContent>
            </CardActionArea>
            {go?goSingerDetail():""}
        </Card>
    )
}
